
<template>
  <view v-if="isShow" class="show-toast">{{ message }}</view>
</template>
<script>
const $this = []
export default {
  props: {
    top: {
      // 距离顶部距离，单位upx
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      isShow: false,
      message: '',
      options: {
        duration: 3000,
        icon: 'none',
        mask: false
      },
      timer: null
    }
  },
  created() {
    $this.push(this)
  },
  destroyed() {
    $this.pop()
  },
  methods: {
    show(message, options) {
      const newOptions = Object.assign(this.options, options)
      const opt = {
        ...newOptions,
        title: message
      }
      if (message.length > 35) {
        this.isShow = true
        this.message = message
        setTimeout(() => {
          this.isShow = false
          this.message = ''
        }, opt.duration)
      } else {
        uni.showToast(opt)
      }
    }
  }
}
</script>

<style lang="scss">
.show-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  padding: 20rpx;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  line-height: 30rpx;
  font-size: 28rpx;
  z-index: 999;
  word-break:break-all;
  border-radius: 10rpx;
}
</style>
